<template>
  <div class="ImgSingleStyle">
    <div class="title">图片轮播</div>
    <el-form :model="datas" label-width="120px" label-position="left">
      <el-form-item label="切换时间:">
        <el-input-number v-model="datas.duration" :min="2500" controls-position="right" />
      </el-form-item>
      <el-form-item label="组件高度:">
        <el-input-number v-model="datas.height" :min="130" controls-position="right" />
      </el-form-item>
      <div class="imgs" v-for="(lun, imx) in datas.list" :key="imx">
        <div class="close">
          <el-icon @click="onDelImg(imx)"><Close /></el-icon>
        </div>
        <div class="ml20 mr20">
          <el-form-item label="图片:">
            <UploadImg v-model:image-url="lun.image">
              <template #empty>
                <el-icon><Picture /></el-icon>
                <span>请上传图片</span>
              </template>
            </UploadImg>
          </el-form-item>
          <el-form-item label="链接类型:">
            <el-select v-model="lun.linkType" @change="handleChangeSel(imx)">
              <el-option v-for="item in swiperType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="菜品名字:" v-if="lun.linkType === 1">
            <el-input disabled v-model="lun.linkName"></el-input>
          </el-form-item>
          <!-- <el-form-item label="链接指向:">
            <el-input v-if="lun.linkType === 1" v-model="lun.linkValue" />
            <el-input v-else v-model="lun.linkName" disabled>
              <template #append>
                <el-button :icon="Plus" @click="openSelectTreeTable('选择商品', imx)"></el-button>
              </template>
            </el-input>
          </el-form-item> -->
          <el-form-item label="链接指向:" v-if="lun.linkType === 1">
            <el-input v-model="lun.linkValue" disabled @click="openSelectTreeTable('选择菜品', imx)">
              <template #append>
                <el-button
                  style="color: #ffffff; background-color: #fdc31d"
                  :icon="Plus"
                  @click="openSelectTreeTable('选择菜品', imx)"
                ></el-button>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <el-button class="w100" type="primary" plain @click="addImg">点击添加图片</el-button>
    </el-form>
    <SelectTreeTable @radio="onRadio" ref="selectTreeTableRef" />
  </div>
</template>

<script lang="ts" setup name="ImgSingleStyle">
import { ref, toRefs } from "vue";
import { swiperType } from "@/utils/serviceDict";
import UploadImg from "@/components/Upload/Img.vue";
import { Plus } from "@element-plus/icons-vue";
import SelectTreeTable from "@/components/SelectTreeData/index.vue";
// import { getWaresList, getWaresCategoryList } from "@/api/modules/inventory";
import { getGoodsList, getFoodCategoryList } from "@/api/modules/goods";

const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
const addImg = () => {
  datas.value.list.push({
    id: datas.value.list.length,
    linkType: 0,
    linkValue: "",
    linkName: "",
    image: ""
  });
};
const linkUrl = {
  waresURL: "/pages/product/product_detail?productId="
  // 链接指向数组
};
const onDelImg = (ix: number) => {
  datas.value.list.splice(ix, 1);
};
const handleChangeSel = (ix: number) => {
  datas.value.list[ix].linkValue = "";
  datas.value.list[ix].linkName = "";
};
const onRadio = (row: any) => {
  datas.value.list[row.index].linkValue = linkUrl.waresURL + row.data.id;
  datas.value.list[row.index].linkName = row.data.name;
};
const selectTreeTableRef = ref<InstanceType<typeof SelectTreeTable> | null>(null);
const openSelectTreeTable = (title: string, ix: number) => {
  const params = {
    title,
    isView: false,
    index: ix,
    selType: "radio",
    columns: [
      { type: "radio", label: "#", width: 60 },
      { prop: "name", label: "菜品名称", align: "left" }
    ],
    idName: "goodsCategoryId",
    treeApi: getFoodCategoryList,
    apiParams: { isFoodList: 1 },
    api: getGoodsList
  };
  selectTreeTableRef.value?.acceptParams(params);
};
</script>

<style scoped lang="scss">
.title {
  padding: 5px;
  margin-bottom: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  border-left: 4px solid var(--el-color-primary);
}
.imgs {
  margin-bottom: 15px;
  border: 1px dashed #eeeeee;
  .close {
    display: flex;
    flex-direction: row-reverse;
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
    background-color: #f2f2f2;
  }
}
</style>
